<template>
  <el-form ref="postForm" :model="content" label-width="80px">
    <Sticky :class-name="'sub-navbar'">
      <div class="web-title">网站信息设置</div>
    </Sticky>
    <div class="web-footer-container">
      <el-row>
        <el-col :span="24">
          <el-form-item label="logo">
            <el-col :span="5">
              <image-upload
                :drag="false"
                :list-type="listType"
                :file-list="fileList"
                @onSuccess="onUploadSuccess"
                @onRemove="onUploadRemove"
              />
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="logo路径">
            <el-input
              v-model="content.logo_url"
              placeholder="请上传图片获取图片路径"
              :readonly="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="公司地址">
            <el-input
              v-model="content.address"
              placeholder="请输入地址"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="公司电话">
            <el-input
              v-model="content.mobile"
              placeholder="请输入电话"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="版权信息">
            <el-input
              v-model="content.copyright"
              placeholder="请输入版权"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-collapse>
            <el-collapse-item>
              <template slot="title">
                <div style="width: 100%; text-align: center">设置底部导航</div>
              </template>
              <el-table key="'1'" border :data="content.footerLink">
                <el-table-column label="标题" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="链接" align="center" prop="link" />
                <el-table-column label="操作" align="center">
                  <template slot-scope="item">
                    <el-button type="primary" icon="el-icon-edit" size="mini" plain @click="editFooterLink(item.$index, item.row)">修改</el-button>
                    <el-button v-waves type="danger" size="mini" icon="el-icon-delete" plain @click="removeFooterLink(item.$index)"> 删除 </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-form ref="footerLinkForm" v-model="footerLinkForm" :inline="true" label-width="80px" class="footer-form">
                <el-form-item label="标题">
                  <el-input v-model="footerLinkForm.title" placeholder="请输入导航名称" />
                </el-form-item>
                <el-form-item label="链接">
                  <el-input v-model="footerLinkForm.link" placeholder="请输入链接地址" />
                </el-form-item>
                <el-form-item>
                  <el-button v-waves type="primary" plain size="mini" @click="submitFooterLinkChildren()">确认</el-button>
                  <el-button v-waves type="danger" plain size="mini" @click="addFooterLinkChildren()">新增</el-button>
                </el-form-item>
              </el-form>
            </el-collapse-item>
          </el-collapse>
        </el-col>
        <el-col :span="24">
          <el-collapse>
            <el-collapse-item>
              <template slot="title">
                <div style="width: 100%; text-align: center">设置底部图文信息</div>
              </template>
              <el-table key="1" :data="content.footerLinkText" border>
                <el-table-column label="标题" align="center">
                  <template slot-scope="{ row }">
                    <span>{{ row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="链接" align="center" prop="link" />
                <el-table-column label="图片地址" align="center" prop="image_url" />
                <el-table-column label="简介" align="center" prop="thumb" />
                <el-table-column label="操作" align="center">
                  <template slot-scope="item">
                    <el-button type="primary" icon="el-icon-edit" size="mini" plain @click="editFooterLinkText(item.$index, item.row)">修改</el-button>
                    <el-button v-waves type="danger" size="mini" icon="el-icon-delete" plain @click="removeFooterLinkText(item.$index, item.row)"> 删除 </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-form ref="textListForm" v-model="footerLinkTextForm" label-width="80px">
                <el-row style="margin-top: 20px">
                  <el-col :span="12">
                    <el-form-item label="标题">
                      <el-input v-model="footerLinkTextForm.title" placeholder="请输入标题" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="链接">
                      <el-input v-model="footerLinkTextForm.link" placeholder="请输入链接地址" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="logo">
                      <el-col :span="5">
                        <image-upload
                          :drag="false"
                          :list-type="listType"
                          :file-list="fileList"
                          @onSuccess="onUploadFooterLinkSuccess"
                          @onRemove="onUploadFooterLinkRemove"
                        />
                      </el-col>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="图片地址">
                      <el-input
                        v-model="footerLinkTextForm.image_url"
                        placeholder="请上传图片获取图片路径"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="简介">
                      <el-input
                        v-model="footerLinkTextForm.thumb"
                        placeholder="请输入简介"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" style="text-align: center">
                    <el-button v-waves type="danger" plain size="mini" @click="addFooterLinkText()">新增</el-button>
                    <el-button v-waves type="primary" plain size="mini" @click="submitFooterLinkText()">确认</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="text-align: center; margin-top: 20px">
          <el-button v-waves type="primary" :loading="isSubmit" @click="submitForm()">确认提交</el-button>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>

<script>
import Sticky from '../../components/Sticky/index'
import ImageUpload from '../../components/ImageUpload/index'
import { removeSingleImage } from '@/api/upload-image'
import waves from '@/directive/waves/waves'
import { getInfo, updateFooter } from '../../api/web-index'
export default {
  components: { Sticky, ImageUpload },
  directives: { waves },
  data() {
    return {
      isSubmit: false,
      fileList: [],
      listType: '',
      content: {
        logo_url: '',
        address: '',
        mobile: '',
        copyright: '',
        footerLink: [{ 'title': '首页', 'link': '/' }],
        footerLinkText: []
      },
      // 底部图文链接form
      footerLinkTextForm: {
        'image_url': ''
      },
      // 底部图文链接选中的下标
      footerLinkTextFormNum: -1,
      // 底部导航链接form
      footerLinkForm: {},
      // 底部导航链接选中的下标
      footerLinkFormNum: -1
    }
  },
  mounted() {
    this.handleList()
  },
  methods: {
    onUploadSuccess(urlFile, file) {
      this.content.logo_url = urlFile
      console.log(this.listList)
    },
    onUploadRemove() {
      const postData = {
        'file': this.content.logo_url
      }
      removeSingleImage(postData).then(response => {
        const { message, status } = response
        if (status === 1) {
          this.$message({
            message: '图片删除成功',
            type: 'success'
          })
          this.isSubmit = false
          this.content.logo_url = ''
        } else {
          this.$message({
            message: message,
            type: 'error'
          })
        }
      })
    },
    editFooterLink(index, item) {
      this.footerLinkFormNum = index
      this.footerLinkForm = { ...item }
    },
    removeFooterLink(index) {
      this.content.footerLink.splice(index, 1)
    },
    addFooterLinkChildren() {
      if (!Object.prototype.hasOwnProperty.call(this.footerLinkForm, 'tilte') && !Object.prototype.hasOwnProperty.call(this.footerLinkForm, 'link') || this.footerLinkForm.tilte === '' || this.footerLinkForm.link === '') {
        this.$message({
          type: 'warning',
          message: '添加的数据不能为空'
        })
        return
      }
      this.content.footerLink.push(this.footerLinkForm)
      this.footerLinkFormNum = -1
      this.footerLinkForm = {}
    },
    submitFooterLinkChildren() {
      if (this.footerLinkFormNum < 0) {
        this.addFooterLinkChildren()
      } else {
        this.content.footerLink.splice(this.footerLinkFormNum, 1, this.footerLinkForm)
        this.footerLinkFormNum = -1
        this.footerLinkForm = {}
      }
    },
    submitForm() {
      this.isSubmit = true
      const postDate = {
        postDate: {
          title: '底部设置',
          content: this.content
        }
      }
      updateFooter(postDate).then((response) => {
        const { message } = response
        this.$message({
          type: 'success',
          message: message
        })
      })
      setTimeout(() => {
        this.isSubmit = false
      }, 1000)
    },
    handleList() {
      getInfo().then((response) => {
        const { content } = response.data
        this.content = {
          ...this.content,
          ...content
        }
        console.log(response)
        this.$message({
          type: 'success',
          message: '查询成功'
        })
      })
    },
    onUploadFooterLinkSuccess(urlFile, file) {
      this.footerLinkTextForm.image_url = urlFile
      this.footerLinkTextForm.name = file.name
    },
    onUploadFooterLinkRemove() {
      console.log(this.fileList)
      const postData = {
        'file': this.footerLinkTextForm.image_url
      }
      removeSingleImage(postData).then(response => {
        const { message, status } = response
        if (status === 1) {
          this.$message({
            message: '图片删除成功',
            type: 'success'
          })
          this.footerLinkTextForm.image_url = ''
        } else {
          this.$message({
            message: message,
            type: 'error'
          })
        }
      })
    },
    submitFooterLinkText() {
      if (this.footerLinkTextFormNum < 0) {
        this.addFooterLinkText()
      } else {
        this.content.footerLinkText.splice(this.footerLinkTextFormNum, 1, this.footerLinkTextForm)
        this.footerLinkTextFormNum = -1
        this.footerLinkTextForm = {}
        this.fileList = []
      }
    },
    addFooterLinkText() {
      if (!Object.prototype.hasOwnProperty.call(this.footerLinkTextForm, 'tilte') && !Object.prototype.hasOwnProperty.call(this.footerLinkTextForm, 'link') && !Object.prototype.hasOwnProperty.call(this.footerLinkTextForm, 'iamge_url') || this.footerLinkTextForm.image_url === '' || this.footerLinkTextForm.tilte === '' || this.footerLinkTextForm.link === '') {
        this.$message({
          type: 'warning',
          message: '添加的数据不能为空'
        })
        return
      }
      this.content.footerLinkText.push(this.footerLinkTextForm)
      this.footerLinkTextFormNum = -1
      this.footerLinkTextForm = {}
      this.fileList = []
    },
    editFooterLinkText(index, item) {
      this.footerLinkTextFormNum = index
      this.footerLinkTextForm = { ...item }
      const fileList = [
        { 'name': item.name, 'url': item.image_url }
      ]
      this.fileList = fileList
    },
    removeFooterLinkText(index, item) {
      this.content.footerLinkText.splice(index, 1)
      this.ImageRemove(item.image_url)
    },
    ImageRemove(url) {
      const postData = {
        'file': url
      }
      removeSingleImage(postData).then(response => {
        const { status } = response
        if (status === 1) {
          this.$message({
            message: '图片删除成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '图片删除失败',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.web-footer-container{
  padding: 40px 50px 20px;
  .footer-form{
    padding-top: 25px;
  }
}
</style>
